<template>
  <view class="pickerContainer">
    <view class="pickBox" @tap="openPicker" >
          <text class="placeholder" v-if="!selectLabel"  :style="{fontSize: size }">{{ placeholder }}</text>
          <text class="valueText" v-else :style="{fontSize: size}">{{ selectLabel }}</text>
          <u-icon name="arrow-down" color="#007DF2" :size="size"></u-icon>
     
    </view>
    <u-overlay :show="showPicker">
      <view class="wrapper">
        <view class="block">
           <view class="head">
            <text   class="cancel" @tap="closeOverlay">取消</text>
            <text class="title">{{ placeholder }}</text>
            <text   class="confirm" @tap="confirm">确定</text>
            </view>
            <view class="inputBox" v-if="filter"  @tap.stop>
              <input type="text" class="filterInput" placeholder="筛选" v-model="keyWord" placeholder-style="fontSize: 0.8rem" @input="filter">
              <u-icon name="close" class="close-icon" color="gray" v-if="keyWord" @tap="clear"></u-icon>
            </view>
            <view class="popup"  ref="popup" @tap.stop>
                <picker-view :value="currentValue" @change="change" class="picker-view">
                  <picker-view-column>
                      <view class="item" v-for="(item,index) in optionList" :key="index">{{ item.label }}</view>
                  </picker-view-column>
              </picker-view>
              </view>
        </view>

      </view>
    </u-overlay>
  </view>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
const props = defineProps({
  placeholder:{
    type: String,
    default: '请选择',
    required: false
  },
  modelValue: {
    type: [String, Number],
    default: '',
    required: true
  },
  options: {
    type: Array,
    default: () => [],
    required: true
  },
  filter: {
	  type: Boolean,
	  default: true,
	  required: false
  },
  size:{
	  type: String,
	  default: '20rpx',
	  required: false
  },
  disabled: {
    type: Boolean,
    default: false,
    required: false
  }
})
const selectLabel  = computed(() => {
	if(!optionList.value || optionList.value.length === 0 || !selectValue.value) {
		return ''
	} else {

			return optionList.value.filter(item => item.value === selectValue.value).length > 0 ? optionList.value.filter(item => item.value === selectValue.value)[0].label : ''
	}
	
})
const selectIndex  = computed(() => {
  if(!optionList.value || optionList.value.length === 0  || !selectValue.value) {
		return -1
	} else {
    return optionList.value.findIndex(item=> item.value === selectValue.value)
  }
})
const selectValue = ref ('') //选中值
const currentValue = ref([]) //当前选中值
const keyWord = ref('')
const selectOption = ref(null)
const emits = defineEmits(['update:modelValue', 'change', 'update:validate']) 
const optionList = ref([])
watch(()=> props.modelValue, (newVal, oldVal)=> {
    selectValue.value = props.modelValue
    
  },{ immediate: true, deep: true }
)
watch(() => props.options, (newVal)=> {
    optionList.value = newVal
  },{
    deep: true,
    immediate: true
  }
)
watch(() => selectIndex.value, (newVal)=> {
  currentValue.value = newVal === -1 ? [] : [newVal]
},{
  immediate: true

}
)
function filter() {
  optionList.value = props.options.filter(item=> item.label.includes(keyWord.value))
}
function clear() {
  keyWord.value = ''
  filter()
}

const showPicker = ref(false)
function openPicker() {
  if(props.disabled) {
    return
  }
  showPicker.value = true
}

function closeOverlay() {
  showPicker.value = false
  currentValue.value = selectIndex.value === -1 ? [0] : [selectIndex.value]
}
function change(item) {
  currentValue.value = item.detail.value
}
function confirm() {
  selectValue.value = optionList.value[currentValue.value[0]|| 0].value
  selectOption.value = optionList.value[currentValue.value[0]|| 0]
  emits('update:modelValue', selectValue.value)
  emits('change', selectOption.value)
  showPicker.value = false
}

</script>
<style lang="scss" scoped>
@import './index.scss';
</style>